<template>
  <div id="login">
    <div class="login-box">
      <div class="login-left">
        <div class="login-top">
          <img :src="logoImg" alt="">
          <p>ADSCM浆站管理系统</p>
        </div>
        <img :src="logoBg" class="logoBg">
        <div class="login-bottom">成都佳颖医用制品有限公司</div>
      </div>
      <div class="login-right">
        <el-form ref="account" :model="account" :rules="rules" size="medium">
          <h3 class="title">欢迎回来</h3>
          <div class="formBody">
            <el-form-item prop="username" class="reset-form-item">
                <el-input type="text" ref="autoFocus" v-model="account.username" placeholder="用户名"  autofocus="true"   autocomplete="on" @keyup.enter.native="submit('account')"></el-input>
            </el-form-item>
            <el-form-item prop="password" class="reset-form-item">
              <el-input v-model="account.password" type="password" placeholder="密码"
                autocomplete="on" @keyup.enter.native="submit('account')"></el-input>
            </el-form-item>
            <el-form-item class="loginBtn">
              <el-button  type="primary" @click="submit('account')"  @keypress.enter="submitalert"   :disabled="allowLogin" :loading="loading">登录</el-button>
            </el-form-item>
          </div>
        </el-form>
        </div>
    </div>
  </div>
</template>
<script>
import api from 'plugins/axios/api.js'
import logoBg from 'images/logoBg.png'
import logoImg from 'images/logoWhite.png'
export default {
  name:'Login',
  data() {
    let validateAccount = (rules, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'));
      } else {
        this.validateCorrect();
        callback();
      }
    };
    let validatePwd = (rules, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        this.validateCorrect();
        callback();
      }
    };
    return {
      loading: false,
      allowLogin: true,
      logoBg,
      logoImg,
      account: {
        username: '',
        password: ''
      },
      redirect:'',
      rules: {
        username: [{required: true, validator: validateAccount, trigger: 'change'}],
        password: [{required: true, validator: validatePwd, trigger: 'change'}]
      },
      fullscreenLoading: false
      };
  },
  mounted(){
   this.redirect =  this.$router.currentRoute.query.redirect?decodeURIComponent(this.$router.currentRoute.query.redirect):'';
   let reg_user = sessionStorage.getItem('username');
   if (reg_user) {
      this.account.username = reg_user.username;
    }
   this.loginOut();
  },
  methods: {
    submitalert(){
      alert();
    },
    errTip() {

    },
    submit(formName) {
        let _this = this;
        _this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.loading = true;
            api.login(_this.account).then(res=>{
              // console.log(res.content.user.id);
              if(!res) {
                _this.$message.error({
                  showClose: true,
                  duration: 1500,
                  message: '用户信息登录错误，请重新填写',
                  onClose: function () {
                    // _this.account.password = '';
                    _this.account.username = '';
                    _this.$refs.autoFocus.focus();
                    _this.validateCorrect();
                    _this.loading = false;
                    _this.$router.push('/')
                  }
                })
              } else {
                sessionStorage.setItem('roles', JSON.stringify(res.content.user.roles));
                sessionStorage.setItem('unitId', res.content.user.unitId);
                sessionStorage.setItem('userId', res.content.user.id);
                sessionStorage.setItem('tokenId', res.content.tokenId);
                sessionStorage.setItem('username', _this.account.username);
                localStorage.setItem('ms_username', _this.account.username);
                localStorage.setItem('menus', JSON.stringify(res.content.user.allMenus));
                _this.$router.push({path:`${_this.redirect!==''?_this.redirect:'/'}`});
              }
            }, error=>{
              _this.$router.push('/')
              // _this.loading = false;
            })
          }
        });
    },
    validateCorrect() {
      if (this.account.password.trim().length > 0 && this.account.username.trim().length > 0) {
        this.allowLogin = false;
      } else {
        this.allowLogin = true;
      }
    },
    loginOut(){/**退出登录 */
      api.loginOut().then(res=>{
        localStorage.removeItem('menus');
        sessionStorage.removeItem('username');
        localStorage.removeItem('ms_username');
        sessionStorage.removeItem('roles');
        sessionStorage.removeItem('unitId');
        sessionStorage.removeItem('tokenId');
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
#login
  background #f1f1f1
  height 100%
  width 100%
  position relative
  overflow auto
  .login-box
    height 488px
    width 840px
    background #fff
    position absolute
    left 50%
    top 50%
    margin-left -420px
    margin-top -244px
    box-shadow 2px 2px 10px #999
    .login-left
    .login-right
      width 50%
      height 100%
      box-sizing border-box
      padding-top 60px
      float left
    .login-left
      position relative
      background-color #3bc1c4
      background $theme-linear-gradient
      color #fff
      text-align center
      .login-top
        font-size 24px
        >img
          margin-bottom: 16px;
      .login-bottom
        width 100%
        position absolute
        bottom 24px
      .logoBg
        position absolute
        right 8px
        bottom 8px
        opacity .3
    .login-right
      text-align center
      .title
        color #3bc1c4
        margin-bottom 80px
        font-size 24px
        font-weight normal
      .formBody
        width 268px
        margin auto
      .reset-form-item
        margin-bottom 30px
      .loginBtn
        text-align right
</style>


